<template>
  <div>
      <div class="selectbook">
        <div class="selectbox">
            <div class="selecttype">美文欣赏</div>
            <div class="bottom"></div>
        </div>
        <div class="selectbox">
            <div class="selecttype">阅读方法</div>
        </div>
        <div class="selectbox">
            <div class="selecttype">故事书籍</div>
        </div>

    </div>
    <div class="selectType">
        <div class="typeleft">全部年纪:
            <select name="" id="">
                <option value="">1-2年级</option>
                <option value="">3-4年级</option>
                <option value="">5-6年级</option>
            </select>
        </div>

    </div>
    <div class="bookpage">
        <div id="pagescou">
            <ul>
                <li v-for="user in newUser" :key="user.id">
                    <div class="bookbox4">

                        <div class="booknamecou">{{user.name}}</div>

                    </div>

                </li>
            </ul>

            <!--  这里绑定总页数    父组件传过来参数 复用件接收后判断如果为true执行css样式  -->
            <pagination :pages=showUsers @click-pag="fn" :page='uPage'> </pagination>

        </div>
    </div>

  </div>
</template>

<script>
import pagination from '../components/pagination'
export default {
    data(){
        return{
            users: [{
                        id: 1,
                        name: '写给云（作者：珠海市香洲区景区小学-严杏）',
                    }, {
                        id: 2,
                        name: '听听那寂静（作者：珠海市香洲区实验学校-黄丽君）',

                    }, {
                        id: 3,
                        name: '大自然的语言（作者：珠海市香洲区实验学校-黄丽君）',

                    }, {
                        id: 4,
                        name: '太阳的话（作者：高栏港区金洲小学-黄译贤）',

                    }, {
                        id: 5,
                        name: '写给云（作者：珠海市香洲区景区小学-严杏）',
                    }, {
                        id: 6,
                        name: '听听那寂静（作者：珠海市香洲区实验学校-黄丽君）',

                    }, {
                        id: 7,
                        name: '大自然的语言（作者：珠海市香洲区实验学校-黄丽君）',

                    }, {
                        id: 8,
                        name: '太阳的话（作者：高栏港区金洲小学-黄译贤）',

                    }, {
                        id: 9,
                        name: '写给云（作者：珠海市香洲区景区小学-严杏）',
                    }, {
                        id: 10,
                        name: '听听那寂静（作者：珠海市香洲区实验学校-黄丽君）',

                    }, {
                        id: 11,
                        name: '大自然的语言（作者：珠海市香洲区实验学校-黄丽君）',

                    }, {
                        id: 12,
                        name: '太阳的话（作者：高栏港区金洲小学-黄译贤）',

                    },

                ],
                uPage: 1, //当前页
                perPage: 10, //每页显示多少条
        }
    },
    components:{
        pagination
    },
     computed: {
    // 获取总页数
    showUsers: {
      get() {
        return Math.ceil(this.users.length / this.perPage);
      },
    },
    newUser: {
      //渲染到页面
      get() {
        // 分割数据
        // this.$options.methods.searchMethod();
        return JSON.parse(JSON.stringify(this.users)).splice(
          (this.uPage - 1) * this.perPage,
          this.perPage
        );
      },
    },
  },

  methods: {
    fn(n) {
      // console.log(n)
      this.uPage = n; //接收到 子组件传过来的数据 修改data的显示
    },
  },
    
}
</script>

<style scoped>
@import'../assets/css/course.css';
</style>